<template>
  <div>
    <h2>场内滞留集装箱</h2>
    <tablePage ref="containerTab" :api="getRetentionContainerList" :param="tabParam" :isStartLoad="false">
      <template slot-scope="props">
        <Table :columns="containerColumn" :data="props.data"></Table>
      </template>
    </tablePage>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getStationMember, getRetentionContainerList } from '@api/backEnd/station'

  export default {
    name: 'stationContainerDetail',
    data () {
      let currentName = '1'
      let tabParam = {
        station: ''
      }
      let containerColumn = [
        {
          title: '集装箱号',
          width: 155,
          key: 'container_no',
          align: 'center'
        },
        {
          title: '进场时间',
          ellipsis: true,
          align: 'center',
          key: 'time'
        },
        {
          title: '滞留状态',
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let state = params.row.heavy_or_empty + ',' + params.row.in_or_out
            let stateText = ''
            if (state === '0,2') {
              stateText = '重箱'
            } else if (state === '0,1') {
              stateText = '重箱'
            } else if (state === '1,2') {
              stateText = '空箱'
            } else if (state === '1,1') {
              stateText = '空箱'
            }
            return (<span>{stateText}</span>)
          }
        },
        {
          title: '滞留时长',
          align: 'center',
          render: (h, params) => {
            return (<span>{params.row.retentionDay + ' 时'}</span>)
          }
        }
      ]
      let datas = { currentName, tabParam, containerColumn, getRetentionContainerList }
      return datas
    },
    props: {
      // 城市列表
      cityList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    watch: {},
    methods: {},
    mounted () {
      getStationMember().then((res) => {
        if (+res.data.isSuccess === 1) {
          this.tabParam.station = res.data.data.station_code
          this.$refs['containerTab'].dataRefresh()
        }
      })
    },
    components: { tablePage }
  }
</script>
<style scoped>
  h2 {
    margin: 20px 0;
    font-size: 18px;
    font-weight: bold;
  }

  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
